<template>
  <div
  ref="containerTarget"
    class="group relative p-0.5 rounded-xl border-white duration-500 hover:bg-red-100/40 dark:border-zinc-200"
  >
    <div>
      <m-svg-icon
        class="w-1.5 h-1.5 absolute translate-y-[-50%] top-[50%] left-2"
        name="search"
        color="#707070"
      />
      <input class="block dark:bg-zinc-800 w-full h-[44px] pl-4 text-sm outline-0 bg-zinc-100 caret-zinc-400 rounded-xl text-zinc-900 dark:text-zinc-200 tracking-wide font-semibold border dark:border-zinc-700 border-zinc-100 duration-500 group-hover:bg-white dark:group-hover:bg-zinc-900 group-hover:border-zinc-200 dark:group-hover:border-zinc-700 focus:border-red-300" 
      type="text" v-model="inputValue"
      @keyup.enter="onSearchHandler"
      @focus="onFocusHandler"
        @blur="onBlurHandler"
       placeholder="搜索"></input>
      <m-svg-icon 
      v-show="inputValue"
      name="input-delete" 
      @click="onClearClick"
      class="h-1.5 w-1.5 absolute translate-y-[-50%] top-[50%] right-9 duration-500 cursor-pointer"></m-svg-icon>
        <div class="opacity-0 h-1.5 w-[1px] absolute translate-y-[-50%] top-[50%] right-[62px] duration-500 bg-zinc-200 group-hover:opacity-100"></div>
        

        <!-- 搜索按钮 -->
         <m-button 

         class="absolute translate-y-[-50%] top-[50%] right-1 rounded-full duration-500 group-hover:opacity-100"
         icon="search"
         iconColor="#ffffff"
         @click="onSearchHandler"
         ></m-button>
    </div>
    <transition name="slide">
        <div 
        v-if="$slots.dropdown"
        v-show="isFocus"
        class="max-h-[368px] w-full text-base overflow-auto bg-white dark:bg-zinc-800 absolute z-20 left-0 top-[56px] p-2 rounded border border-zinc-200 dark:border-zinc-600 duration-200 hover:shadow-3xl">
            <slot name="dropdown"></slot>
        </div>
    </transition>
  </div>
</template>
<script>
const EMIT_UPDATE_MODELVALUE = 'update:modelValue'
const EMIT_SEACRH = 'search'
const EMIT_CLEAR = 'clear'
// 输入事件
const EMIT_INPUT = 'input'
// 获取焦点事件
const EMIT_FOCUS = 'focus'
// 失去焦点事件
const EMIT_BLUR = 'blur'
</script>
<script setup>
import { watch,ref} from "vue"
import {useVModel, onClickOutside} from "@vueuse/core"
import mButton from "../button/index.vue"
// const inputValue = ref(null)
const props = defineProps({
    modelValue: {
        required: true, 
        type: String
    }
})

const inputValue = useVModel(props)
const emits =defineEmits([EMIT_UPDATE_MODELVALUE, EMIT_SEACRH, EMIT_CLEAR, EMIT_INPUT, EMIT_FOCUS, EMIT_BLUR])
const onClearClick =() => {
    inputValue.value = ''
    emits(EMIT_CLEAR, '')
}
const onSearchHandler = () => {
    emits(EMIT_SEACRH, inputValue.value)
    console.log("12312443545")
}
const isFocus = ref(false)
const onFocusHandler = () => {
  isFocus.value = true
  emits(EMIT_FOCUS)
}
const onBlurHandler = () => {
  emits(EMIT_BLUR)
}

const containerTarget = ref(null)
onClickOutside(containerTarget, () => {
  isFocus.value = false
})

watch(inputValue, (val) => {
  emits(EMIT_INPUT, val)
})
</script>

<style lang="scss" scoped>
.slide-enter-active{
    transition: all 0.5s;
}
.slide-leave-active{
    transition: all 0.5s;
}
 
.slide-enter-from,
.slide-leave-to{
    transform: translateY(40px);
    opacity: 0;
}
</style>
